<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Cascader 级联选择</title>
	<link rel="stylesheet" href="../static/css/reset.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/antd.min.js"></script>
	<script src="../static/js/icons_antd.js"></script>
</head>
<style>
.ant-select{
	margin-left: 20px;
}
.aut-icon{
	width: 1.2em;
	height: 1.2em;
}
</style>
<body>

<div id="app">
	<a-divider class="a-divi" orientation="left">基本用法</a-divider><!-- =============================================================== -->
	<p class="desc">省市区级联。</p>
	<a-cascader v-model:value="value1" :options="options1" show-search placeholder="Please select"></a-cascader>
	
	<a-divider class="a-divi" orientation="left">移入展开</a-divider><!-- =============================================================== -->
	<p class="desc">通过移入展开下级菜单，点击完成选择。</p>
	<a-cascader v-model:value="value2" :options="options1" expand-trigger="hover" placeholder="Please select"></a-cascader>
	
	<a-divider class="a-divi" orientation="left">选择即改变</a-divider><!-- =============================================================== -->
	<p class="desc">这种交互允许只选中父级选项。</p>
	<a-cascader v-model:value="value3" :options="options1" placeholder="Please select" change-on-select></a-cascader>
	
	<a-divider class="a-divi" orientation="left">自定义已选项</a-divider><!-- =============================================================== -->
	<p class="desc">例如给最后一项加上邮编链接。</p>
	<a-cascader v-model:value="value4" placeholder="Please select" :options="options1" style="width: 300px">
		<template #displayRender="{ labels, selectedOptions }">
			<span v-for="(label, index) in labels" :key="selectedOptions[index].value">
				<span v-if="index === labels.length - 1">
					{{ label }} 【 <a @click="e => handleAreaClick4(e, label, selectedOptions[index])">{{ selectedOptions[index].code }}</a> 】
				</span>
				<span v-else>{{ label }} / </span>
			</span>
		</template>
	</a-cascader>
	
	<a-divider class="a-divi" orientation="left">动态加载选项</a-divider><!-- =============================================================== -->
	<p class="desc">使用 loadData 实现动态加载选项。</p>
	<p class="desc">注意：loadData 与 showSearch 无法一起使用。</p>
	<a-cascader v-model:value="value5" :options="options5" :load-data="loadData5" placeholder="Please select" change-on-select></a-cascader>
	
	<a-divider class="a-divi" orientation="left">后缀图标</a-divider><!-- =============================================================== -->
	<p class="desc">自定义后缀图标</p>
	<a-space>
		<a-cascader v-model:value="value51" style="margin-top: 1rem" :options="options1" placeholder="Please select">
			<template #suffixIcon>
				<smile-outlined class="aut-icon"></smile-outlined>
			</template>
		</a-cascader>
		<a-cascader v-model:value="value52" suffixIcon="ab" style="margin-top: 1rem" :options="options1" placeholder="Please select"></a-cascader>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">自定义 tag 内容</a-divider><!-- =============================================================== -->
	<p class="desc">感觉没啥用</p>
	<a-cascader v-model:value="value6" multiple :options="options1" placeholder="Please select" suffix-icon="Shopping Around">
		<template #tagRender="data">
			<a-tag :key="data.value" color="blue">{{ data.label }}</a-tag>
		</template>
	</a-cascader>
	
	<a-divider class="a-divi" orientation="left">可以自定义显示</a-divider><!-- =============================================================== -->
	<p class="desc">切换按钮和结果分开。</p>
	<span>
		{{ text7 }} &nbsp;
		<a-cascader v-model:value="value7" placeholder="Please select" :options="options1" @change="onChange7">
			<a href="#">Change city</a>
		</a-cascader>
	</span>
	
	<a-divider class="a-divi" orientation="left">禁用选项</a-divider><!-- =============================================================== -->
	<p class="desc">通过指定 options 里的 disabled 字段。</p>
	<a-cascader v-model:value="value8" placeholder="Please select" :options="options1"></a-cascader>
	
	<a-divider class="a-divi" orientation="left">大小</a-divider><!-- =============================================================== -->
	<p class="desc">不同大小的级联选择器。</p>
	<a-cascader v-model:value="value9" placeholder="Please select" size="large" :options="options1"></a-cascader>
	<br />
	<br />
	<a-cascader v-model:value="value9" placeholder="Please select" :options="options1"></a-cascader>
	<br />
	<br />
	<a-cascader v-model:value="value9" placeholder="Please select" size="small" :options="options1"></a-cascader>
	<br />
	<br />
	
	<a-divider class="a-divi" orientation="left">搜索</a-divider><!-- =============================================================== -->
	<p class="desc">可以直接搜索选项并选择。【这个推荐使用】搜索“汉”试试</p>
	<a-cascader v-model:value="value10" :options="options1" :show-search="{filter}" placeholder="Please select"></a-cascader>
	默认用系统自带的filter函数过滤<br /><br />
	<a-cascader v-model:value="value10" :options="options1" :show-search="{filter: filter10, sort: sort10}" placeholder="Please select"></a-cascader>
	用自定义函数filter10过滤<br />
	
	<a-divider class="a-divi" orientation="left">自定义字段名</a-divider><!-- =============================================================== -->
	<p class="desc">自定义字段名。（如果数据来自其他平台，用这个功能比较好）</p>
	<a-cascader v-model:value="value11" :field-names="{ label: 'name', value: 'code', children: 'items' }" :options="options11"
		placeholder="Please select"></a-cascader>
	
	<a-divider class="a-divi" orientation="left">多选</a-divider><!-- =============================================================== -->
	<p class="desc">一次性选择多个选项。</p>
	<a-space direction="vertical" style="width: 1000px">
		<h4>Cascader.SHOW_PARENT：只显示父节点（当父节点下所有子节点都选中时）。默认值。</h4>
		<a-cascader v-model:value="value12" style="width: 100%" multiple max-tag-count="responsive" :options="options1"
			placeholder="Please select"></a-cascader>
		<h4>Cascader.SHOW_CHILD：只显示选中的子节点。</h4>
		<a-cascader v-model:value="value12" style="width: 100%" multiple max-tag-count="responsive" :options="options1"
			placeholder="Please select" :show-checked-strategy="Cascader.SHOW_CHILD"></a-cascader>
	</a-space>
	
	
</div>
<div class="h100"></div>

</body>
<script>
const Main = {
data() {
return {
	value1: [],
	options1: [
		{	
			value: 'zhejiang',label: '浙江',
			children: [
				{
					value: 'hangzhou',label: '杭州',
					children: [
						{value: 'xihu',label: '西湖',code: 752100,},
					],
				},
			],
		},
		{
			value: 'jiangsu',label: 'Jiangsu',
			children: [
				{
					value: 'nanjing',label: 'Nanjing',
					children: [
						{value: 'zhonghuamen',label: 'Zhong Hua Men',code: 453400,},
					],
				},
			],
		},
		{
			value: 'hubei',label: '湖北',
			children: [
				{
					value: 'wuhan',label: '武汉',
					children: [
						{value: 'hankou',label: '汉口',},
						{value: 'hankou2',label: '2汉口2',},
						{value: 'wuchang',label: '武昌',},
						{value: 'yangluo',label: '阳逻',},
					],
				},
				{
					value: 'yichang',label: '宜昌',disabled: true,
					children: [
						{value: 'yiling',label: '夷陵',},
						{value: 'wujiagang',label: '伍家岗',},
					],
				},
			],
		},
	],
	
	value2: [],
	value3: [],
	value4: ['zhejiang', 'hangzhou', 'xihu'],
	
	value5: [],
	options5: [
		{value: 'zhejiang',label: '浙江',isLeaf: false,},
		{value: 'jiangsu',label: 'Jiangsu',isLeaf: false,},
	],
	
	value51: [],
	value52: [],
	
	value6: [],
	text7: 'Unselect',
	value7: [],
	value8: [],
	value9: [],
	value10: [],
	
	value11: [],
	options11: [
		{
			code: 'zhejiang',name: '浙江',
			items: [
				{
					code: 'hangzhou',name: '杭州',
					items: [
						{code: 'xihu',name: '西湖',},
					],
				},
			],
		},
		{
			code: 'jiangsu',name: 'Jiangsu',
			items: [
				{
					code: 'nanjing',name: 'Nanjing',
					items: [
						{code: 'zhonghuamen',name: 'Zhong Hua Men',},
					],
				},
			],
		},
	],
	
	value12: [],
	Cascader: antd.Cascader,
}
},
methods:{
	handleAreaClick4(e, label, option){
		e.stopPropagation();
		console.log('clicked', label, option, e);
	},
	
	loadData5(selectedOptions){
		// console.log(selectedOptions);
		const targetOption = selectedOptions[selectedOptions.length - 1];
		targetOption.loading = true;
		
		// load options lazily
		setTimeout(() => {
			targetOption.loading = false;
			targetOption.children = [
				{value: 'dynamic1',label: `${targetOption.label} Dynamic 1`,},
				{value: 'dynamic2',label: `${targetOption.label} Dynamic 2`,},
			];
			// this.options5 = [...this.options5];
		}, 1000);
		// console.log(targetOption);
	},
	
	onChange7(_value, selectedOptions){
		// console.log(selectedOptions);
		this.text7 = selectedOptions.map(o => o.label).join(', ');
	},
	
	filter10(inputValue, path){
		// console.log(path);
		inputValue = inputValue + '口';		//搜索汉，其实就是用汉口来匹配
		return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
	},
	sort10(a, b, inputValue){
		// console.log(a);
		label_str_a = a.reduce((total,currentValue)=>{
			if(typeof(total) == 'object'){
				return total.label + '，' + currentValue.label;
			}else{
				return total + '，' + currentValue.label;
			}
		});
		label_str_b = b.reduce((total,currentValue)=>{
			if(typeof(total) == 'object'){
				return total.label + '，' + currentValue.label;
			}else{
				return total + '，' + currentValue.label;
			}
		});
		// console.log(label_str_a.length);
		// console.log(label_str_b.length);
		//这里用最简的对比字符串长度来排序（试试把它们反过来减）
		return label_str_b.length - label_str_a.length;
	},
	
},
}

const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(AntdIconsVue)) {app.component(key, component)};
app.use(antd);
let vm = app.mount("#app");


</script>
</html>
